//封装一个立即执行函数，以免变量污染
;(function () {
  const elevator = document.querySelector('.xtx-elevator')
  const toTop = document.querySelector('#backTop')

  window.addEventListener('scroll', function () {
    const n = document.documentElement.scrollTop
    // if(n >= 300) {
    //   elevator.style.opacity = '1'
    // }else {
    //   elevator.style.opacity = '0'
    // }
    elevator.style.opacity = n >= '300' ? '1' : '0'
  })

  toTop.addEventListener('click', function () {
    window.scrollTo(0, 0)
  })
})()

;(function () {
  const elevator = document.querySelector('.xtx-elevator-list')
  const newGoods = document.querySelector('.xtx_goods_new')
  const popular = document.querySelector('.xtx_goods_popular')
  const brand = document.querySelector('.xtx_goods_brand')
  const topic = document.querySelector('.xtx_goods_topic')

  elevator.addEventListener('click', function (e) {
    // console.log(e.target);
    // dataset.name
    const n = e.target.dataset.name
    if (e.target.tagName === 'A' && n) {
      switch (n) {
        case 'newGoods':
          window.scrollTo(0, newGoods.offsetTop)
          break
        case 'popular':
          window.scrollTo(0, popular.offsetTop)
          break
        case 'brand':
          window.scrollTo(0, brand.offsetTop)
          break
        case 'topic':
          window.scrollTo(0, topic.offsetTop)
          break
        default:
          alert('出bug了')
      }
    }
  })

  window.addEventListener('scroll', function () {
    const dElt = document.documentElement.scrollTop

    elevator.querySelector('a.active') &&
      elevator.querySelector('a.active').classList.remove('active')

    if (dElt >= newGoods.offsetTop && dElt < popular.offsetTop) {
      elevator.querySelector('a[data-name=newGoods]').classList.add('active')
    } else if (dElt >= popular.offsetTop && dElt < brand.offsetTop) {
      elevator.querySelector('a[data-name=popular]').classList.add('active')
    } else if (dElt >= brand.offsetTop && dElt <= topic.offsetTop) {
      elevator.querySelector('a[data-name=brand]').classList.add('active')
    } else if (dElt >= topic.offsetTop) {
      elevator.querySelector('a[data-name=topic]').classList.add('active')
    }
  })
})()
